<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>添加消息</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-tabs v-model="msg_type">
                <el-tab-pane label="文本消息" name="text">
                    <el-form ref="text_msg" :model="text_msg" :rules="rules" label-width="120px">
                        <el-form-item label="回复消息标题" prop="name">
                            <el-input v-model="text_msg.name"></el-input>
                        </el-form-item>
                        <el-form-item label="文本内容" prop="content">
                            <el-input type="textarea" :rows="5" v-model="text_msg.content"></el-input>
                        </el-form-item>
                        <el-form-item label="选择回复类型">
                            <el-checkbox v-model="text_msg.is_normal">普通回复</el-checkbox>
                            <el-checkbox v-model="text_msg.is_subscribe">关注后回复</el-checkbox>
                            <el-checkbox v-model="text_msg.is_keyword">关键词回复</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit('text_msg')">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="图文消息" name="news">
                    <el-form ref="news_msg" :model="news_msg" :rules="rules" label-width="120px">
                        <el-form-item label="回复消息标题" prop="name">
                            <el-input v-model="news_msg.name"></el-input>
                        </el-form-item>
                        <el-table :data="news_msg.content" style="margin-bottom: 10px;" class="form-table">
                            <el-table-column width="200" label="图文消息标题">
                                <template slot-scope="scope">
                                    <el-form-item style="margin-bottom: 0px;"
                                                  :prop="'content.' + scope.$index + '.title'" :rules="rules.title">
                                        <el-input style="width: 180px; margin-left: -120px"
                                                  v-model="scope.row.title"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column width="200" label="图文消息描述">
                                <template slot-scope="scope">
                                    <el-form-item style="margin-bottom: 0px;">
                                        <el-input style="width: 180px; margin-left: -120px"
                                                  v-model="scope.row.desc"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column width="200" label="图片链接">
                                <template slot-scope="scope">
                                    <el-form-item style="margin-bottom: 0px;"
                                                  :prop="'content.' + scope.$index + '.img_url'" :rules="rules.img_url">
                                        <el-input style="width: 180px; margin-left: -120px"
                                                  v-model="scope.row.img_url"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column width="200" label="跳转链接">
                                <template slot-scope="scope">
                                    <el-form-item style="margin-bottom: 0px;" :prop="'content.' + scope.$index + '.url'"
                                                  :rules="rules.url">
                                        <el-input style="width: 180px; margin-left: -120px"
                                                  v-model="scope.row.url"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column width="100" label="删除">
                                <template slot-scope="scope">
                                    <el-button size="small" type="danger" @click="remote_new(scope.$index)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button size="small" type="primary" @click="add_new">添加图文</el-button>
                        <el-form-item label="选择回复类型">
                            <el-checkbox v-model="news_msg.is_normal">普通回复</el-checkbox>
                            <el-checkbox v-model="news_msg.is_subscribe">关注后回复</el-checkbox>
                            <el-checkbox v-model="news_msg.is_keyword">关键词回复</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit('news_msg')">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msgid: '{$msgid}',
            // tab
            msg_type: 'news',
            // 验证规则
            rules: {
                name: {required: true, message: "请填写回复消息标题", trigger: "change"},
                content: {required: true, message: "请填写文本内容", trigger: "change"},
                title: {required: true, message: "请填写图文标题", trigger: "change"},
                img_url: {required: true, message: "请填写图片链接", trigger: "change"},
                url: {required: true, message: "请填写跳转链接", trigger: "change"},
            },
            // 文本消息
            text_msg: {
                name: '',
                content: '',
                type: 'text',
                is_subscribe: '',
                is_normal: '',
                is_keyword: '',
            },
            // 图文消息
            news_msg: {
                name: '',
                content: [{
                    title: '',
                    desc: '',
                    img_url: '',
                    url: '',
                }],
                type: 'news',
                is_subscribe: '',
                is_normal: '',
                is_keyword: '',
            },
        },
        methods: {
            get_msg() {
                var that = this;
                $.ajax({
                    cache: false,
                    url: '{:url("reply.index/get_msg")}' + '?msgid=' + that.msgid,
                    type: 'get',
                    success: function (res) {
                        if (res) {
                            that.msg_type = res.type;
                            if (res.type == 'text') {
                                that.text_msg.name = res.name;
                                that.text_msg.content = res.content;
                                that.text_msg.type = res.type;
                                that.text_msg.is_subscribe = res.is_subscribe ? true : false;
                                that.text_msg.is_normal = res.is_normal ? true : false;
                                that.text_msg.is_keyword = res.is_keyword ? true : false;
                            } else if (res.type == 'news') {
                                that.news_msg.name = res.name;
                                that.news_msg.content = res.content;
                                that.news_msg.type = res.type;
                                that.news_msg.is_subscribe = res.is_subscribe ? true : false;
                                that.news_msg.is_normal = res.is_normal ? true : false;
                                that.news_msg.is_keyword = res.is_keyword ? true : false;
                            }
                        }
                    },
                    error: function () {
                        layerAlert('系统错误,请联系管理员');
                    }
                });
            },
            // 添加一条图文
            add_new() {
                this.news_msg.content.push({
                    title: '',
                    desc: '',
                    img_url: '',
                    url: '',
                });
            },
            // 删除一条图文
            remote_new(index) {
                this.news_msg.content.splice(index, 1);
            },
            // 提交
            submit(formName) {
                var that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        var msg = that[formName];
                        $.ajax({
                            cache: false,
                            url: '{:url("reply.index/handle_msg")}' + '?msgid=' + that.msgid,
                            data: {
                                name: msg.name,
                                content: msg.content,
                                type: msg.type,
                                is_subscribe: msg.is_subscribe,
                                is_normal: msg.is_normal,
                                is_keyword: msg.is_keyword,
                            },
                            type: 'post',
                            success: function (res) {
                                if (res) {
                                    layerAlert('操作成功', function () {
                                        parent.window.location.reload();
                                        layerParentClose();
                                    });
                                } else {
                                    layerAlert('操作失败');
                                }
                            },
                            error: function () {
                                layerAlert('系统错误,请联系管理员');
                            }
                        });
                    }
                });
            },
        },
    });
    vm.get_msg();
</script>
</html>